{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

	  <el-form-item label="当前应用">
	  	<div> {{AppInfo.app_name}} </div>
	  	<div> https://{{AppInfo.app_domain}}.{:config('web.domain')} </div>
	  	<div> {{AppInfo.app_modul}} </div>
	  </el-form-item>

	  <el-form-item label="请求方式" v-show="!form.is_nav" prop="api_method">
	    <el-radio-group v-model="form.api_method">
	      <el-radio :label="'rule'">Rule</el-radio>
	      <el-radio :label="'any'">All</el-radio>
	      <el-radio :label="'post'">Post</el-radio>
	      <el-radio :label="'get'">Get</el-radio>
	      <el-radio :label="'patch'">Patch</el-radio>
	      <el-radio :label="'delete'">Delete</el-radio>
	      <el-radio :label="'put'">Put</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="跨域请求" prop="api_allow">
	    <el-radio-group v-model="form.api_allow">
	      <el-radio :label="0">禁止跨域[默认]</el-radio>
	      <el-radio :label="1">允许跨域</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="登录" prop="api_is_login">
	    <el-radio-group v-model="form.api_is_login">
	      <el-radio :label="0">不需要[默认]</el-radio>
	      <el-radio :label="1">需要</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="Api名称" prop="api_name">
	    <el-input v-model="form.api_name" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
	  </el-form-item>

	  <el-form-item label="控制器" prop="api_controller">
	    <el-input v-model="form.api_controller" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Controller"></el-input>
	  </el-form-item>

	  <el-form-item label="操作" prop="api_action">
	    <el-input v-model="form.api_action" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Action"></el-input>
	  </el-form-item>

	  <el-form-item label="路由/Url" prop="api_url">
	    <el-input v-model="form.api_url" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Url"></el-input>
	    <small class="text-muted mt-2 d-block">
	      <p class="mb-0">路由即网址“/”后的参数:{:config('web.url')}/home,则填入“home”</p>
	    </small>
	  </el-form-item>

	  <el-form-item label="参数/Param" prop="api_param">
	    <el-input v-model="form.api_param" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Param"></el-input>
	    <small class="text-muted mt-2 d-block">
      		<p class="mb-0">例：“/:param/:param1/[:param2]”</p>
	    </small>
	  </el-form-item>

	  <el-form-item label="伪静态后缀" prop="api_ext">
	    <el-radio-group v-model="form.api_ext">
	      <el-radio label="">无[默认]</el-radio>
	      <el-radio label="html">html</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="状态" prop="api_status">
	    <el-radio-group v-model="form.api_status">
	      <el-radio :label="1">启用[默认]</el-radio>
	      <el-radio :label="0">禁用</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="禁用消息" v-if="!form.api_status">
	    <el-input type="textarea" :autosize="{ minRows: 2}" v-model="form.api_status_msg" class="col-12 col-sm-3 pl-0 pr-0" placeholder="禁用消息"></el-input>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
	    <el-button @click="resetForm('form')">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="AppInfo"}
	var AppInfo={};
	{else/}
	var AppInfo={:json_encode($AppInfo,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/client/addApi/'+AppInfo.app_id;
	var is_edit=false;
	var formData={
				app_id:AppInfo.app_id,
				api_method:'rule',
				api_allow:0,
				api_is_login:0,
				api_name:'',
				api_controller:'',
				api_action:'',
				api_url:'',
				api_param:'',
				api_ext:'',
				api_status:1,
				api_status_msg:'',
				api_is_web_name:1,
			};
	{else/}
	var url='/client/editApi/{$Find.api_id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			AppInfo: AppInfo,
			labelPosition:'right',
			form:formData,
			is_edit:is_edit,
	        rules: {
	          app_id: [
	            { required: true, message: '请选择Api等级', trigger: 'change' }
	          ],
	          api_method: [
	            { required: true, message: '请选择请求方式', trigger: 'blur' },
	          ],
	          api_name: [
	            { required: true, message: '请输入Api名称', trigger: 'blur' },
	          ],
	          api_controller: [
	            { required: true, message: '请输入控制器', trigger: 'blur' },
	          ],
	          api_action: [
	            { required: true, message: '请输入操作', trigger: 'blur' },
	          ],
	          api_url: [
	            { required: true, message: '请输入URL', trigger: 'blur' },
	          ],
	          api_status: [
	            { required: true, message: '请选择状态', trigger: 'change' }
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}